<template>
	<view class="Article">
		<u-navbar leftIcon=" " title=" " :placeholder="true" bg-color="transparent"></u-navbar>
		<view class="tab_box">
			<u-tabs :list="bars" :scrollable="false" :current="current" @change="tabsChange" line-color="#45B9A2" line-width="80rpx" line-height="14rpx" :active-style="barStyle1" :inactive-style="barStyle2" ref="uTabs"></u-tabs>
		</view>
		<swiper class="swiper_box" :current="swiperCurrent" @change="animationfinish">
			<swiper-item class="swiper_item" v-for="(item, index) in list" :key="index">
				<scroll-view scroll-y @scrolltolower="getMore" class="swiper_scroll">
					<view class="article_box">
						<view class="article_main">
							<view @click="$goUrl('/pages/info/index/detail','to',{id: child.id})" v-for="(child,idx) in item.children" :key="idx" class="u-rela flex_box flex_row_between article_item">
								<view class="flex_box flex_row_between article_content">
									<view class="u-line-2 article_title">{{child.title}}</view>
									<view class="flex_box flex_row_between article_b">
										<view class="article_view"><u-image src="/static/eye.png" width="25rpx" height="20rpx"/><text>{{child.views}}</text>浏览 | {{child.createTime | date}}</view>
										<!-- <view class="article_date"></view> -->
									</view>
								</view>
								<u-image width="250rpx" height="180rpx" radius="12rpx" :src="child.image"></u-image>
							</view>
						</view>
						<view v-if="item.listStatus==='nomore'&&item.children.length===0" class="empty_box">
							<u-empty mode="news" icon="/static/empty/news.png" text="暂无相关资讯"></u-empty>
						</view>
						<block v-else>
							<u-loadmore :line="true" @loadmore="getMore" :status="item.listStatus"></u-loadmore>
						</block>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		infoList,
	} from '@/common/http.api.js';
	let that;
	export default {
		data() {
			return {
				bars: [{name: "要闻"},{name: "攻略"}],
				current: 0,
				swiperCurrent: 0,
				list: [{children: [],triggered: !0,listStatus: "loading",page: 1},{children: [],triggered: !0,listStatus: "loading",page: 1}],
				refreshStatus: !1,
				barStyle1: {color: '#1E272E',fontSize: '40rpx',fontWeight: 'bold'},
				barStyle2: {color: '#808E9B',fontSize: '40rpx'},
			}
		},
		onLoad(options) {
			that = this;
			that.getList(0),that.getList(1);
		},
		methods: {
			// 获取列表
			getList(e){
				let current = e||e===0 ? e : that.current;
				let params = {
					state: current + 1,
					page: that.list[current].page
				}
				infoList(params).then(res => {
					let list = res.data.data;
					that.list[current].listStatus = list.length<10?"nomore":"loadmore";
					that.list[current].children = [...that.list[current].children,...list];
					if(current===that.current&&that.refreshStatus) that.list[that.current].triggered = false;
				}).catch(err => {
					uni.$u.toast(err.msg);
				});
			},
			// scroll-view到底部加载更多
			getMore() {
				that.list[that.current].listStatus==="loadmore"&&(that.list[that.current].page++,that.list[that.current].listStatus = "loading",that.getList());
			},
			// tabs通知swiper切换
			tabsChange(tab) {
				that.swiperCurrent = tab.index;
			},
			animationfinish(e) {
				let current = e.detail.current;
				that.swiperCurrent = current;
				that.current = current;
				that.list[that.current].page = 1, that.list[that.current].children = [], that.list[that.current].listStatus = "loading", that.getList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.Article{
		background-color: #F6F8FA;
		.tab_box{
			height: 100rpx;
		}
		.swiper_box{
			width: 100%;
			height: calc(100vh - 70px - 100rpx);
			.swiper_item{
				width: 100%;
				height: 100%;
				.swiper_scroll{
					width: 100%;
					height: 100%;
					.article_box{
						padding: 24rpx;
						.article_main{
							.article_item{
								height: 250rpx;
								background-color: #ffffff;
								padding: 24rpx;
								margin-bottom: 24rpx;
								border-radius: 12rpx;
								.article_content{
									height: 200rpx;
									width: 430rpx;
									flex-direction: column;
									.article_title{
										width: 100%;
										height: 96rpx;
										font-size: 32rpx;
										font-weight: 500;
										line-height: 48rpx;
										color: #1E272E;
									}
									.article_b{
										width: 100%;
										height: 48rpx;
										.article_view{
											display: flex;
											align-items: center;
											font-size: 28rpx;
											color: #999999;
											text{
												margin-left: 10rpx;
												// font-size:  28rpx;
												// font-weight: 500;
												// color: #1E272E;
												margin-right: 8rpx;
											}
										}
										.article_date{
											font-size: 28rpx;
											color: #999999;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
